<template>
    <div>
        <h1>{{ruleForm.user.id?'修改':'添加'}}</h1>
        <el-form ref="ruleFormRef" :model="ruleForm.user" :rules="rules" class="demo-ruleForm" :size="formSize">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="ruleForm.user.name" clearable />
            </el-form-item>
            <div style="margin-left: 80px;">
                <el-button @click="cancel">取消</el-button>
                <el-button v-if="ruleForm.user.id" type="primary" @click="updata">修改</el-button>
                <el-button v-else  type="primary" @click="add">添加</el-button>
                
            </div>

        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import http from '../../../api/role'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const formSize = ref('default')
const ruleForm = reactive<any>({
    user: {
        id: '',
        name: '',
    }

})
console.log(route.query);
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
    ],
})
// 取消
const cancel = ()=>{
    router.push('/role/role-list')
}
// 添加
const add = async () => {
    const res: any = await http.getroleadd({ name: ruleForm.name })
    if (res.code === 10000) {
        ElMessage({
            message: '添加成功！',
            type: 'success',
        })
        router.push('/role/role-list')
    } else {
        ElMessage({
            message: '添加失败！',
            type: 'error',
        })
    }
}
// 修改
const updata = async ()=>{
    const res:any = await http.getroleedit(ruleForm.user)
    if (res.code === 10000) {
        ElMessage({
            message: '修改成功！',
            type: 'success',
        })
        router.push('/role/role-list')
    } else {
        ElMessage({
            message: '修改失败！',
            type: 'error',
        })
    }
}
ruleForm.user = route.query
</script>

<style scoped>
.el-form {
    margin-top: 20px;
}

.el-input {
    width: 250px;
    height: 29px;
}

.el-button {
    width: 56px;
    height: 28px;
    font-size: 12px;
}
</style>